{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row" style="margin-top: 40px;height: 212px;">
            <div class="layui-col-md8 ws_banner_title" style="display: flex;">
                <p>
                    <b>{$nav['name']|default=''}</b>
                    <span>{$nav['intro']|default=''}</span>
                </p>
            </div>
            <div class="layui-col-md4" style="display: flex;">
                <img src="__ROOT__/static/plugs/index/img/sj_course.png" alt="" style="width: 100%;">
            </div>
        </div>

        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md12" style="display: flex;justify-content: center;">
                <div class="layui-col-md4">
                    <div class="layui-form layui-hide-xs ws-search" style="background: #f6f7f9;width: 100%;">
                        <div class="layui-form-select">
                            <div class="layui-select-title">
                                <input type="text" placeholder="搜索" value="" class="layui-input" id="keyword" style="cursor:initial;background-color: #eee;">
                            </div>
                        </div>
                        <i class="layui-icon layui-icon-search k_search" style="left: unset;right: 5px;cursor: pointer;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space30" style="margin-top: 40px;" id="competition_list"></div>

        <div class="layui-row">
            <div class="layui-col-md12 layui-col-sm12" style="display: flex;justify-content: center;">
                <div id="com_page_list"></div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>
<style type="text/css">
    .list_item {
        padding: 20px;
        cursor: pointer;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.05);
        margin-bottom: 20px;
    }
    .divimg {
        width: 326px;
        height: 140px;
    }
    .item_title {
        line-height: 1.5;
        font-size: 14px;
        margin: 0px 0px 20px 0px;
    }
    .item_title p {
        align-items: center;
        display: flex;
    }
    .title_s{
        font-size: 20px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .content_contain{
        display: flex;
        flex-direction: column;
        height: 90px;
        justify-content: space-between;
    }
    .content_tx {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -moz-line-clamp: 3;    /* Firefox 特有的前缀 */
        -ms-line-clamp: 3;     /* IE 特有的前缀 */
        -o-line-clamp: 3;      /* Opera 特有的前缀 */
        line-clamp: 3;         /* 标准属性 */
        overflow:hidden;
        -webkit-box-orient: vertical;
    }
</style>
<script type="text/javascript">
    $(function () {
        layui.use(['util'], function () {
            let util = layui.util;
            let laypage = layui.laypage;

            $('.k_search').click(function () {
                // 初始化列表数据
                load_list();
            })
            $("#keyword").keydown(function(event) {
                if (event.which == 13) {
                    // 初始化列表数据
                    load_list();
                }
            });

            // 获取列表数据
            let pg_size = '{$page_size|default=10}';
            function load_list(page = 1) {
                let key = $('#keyword').val();
                let data = {
                    key : key,
                    page : page,
                    limit : pg_size
                }
                httpRequest('{:sysuri("list")}', data, 'post', function (info, ret_data) {
                    // 加载数据
                    let c_list = ret_data.list;
                    let html = '<ul class="layui-row layui-col-space30">';
                    layui.each(c_list, function (index, item) {
                        html += '<li class="layui-col-md12 list_item" lay-on="detail" mid="'+item.id+'">'+
                                '    <div style="display: flex;">'+
                                '        <div class="layui-col-md3" style="margin-right: 20px;">'+
                                '            <img class="divimg" src="'+item.cover+'">'+
                                '        </div>'+
                                '        <div class="layui-col-md9">'+
                                '            <h4 class="item_title">'+
                                '                <p><a class="title_s layui-elip">'+item.title+'</a></p>'+
                                '            </h4>'+
                                '            <div>'+
                                '                <div>'+
                                '                    <div class="content_tx">'+item.intro+
                                '                    </div>'+
                                '                    <div style="position: absolute;bottom: 0;">'+
                                '                        <span>发布时间：'+item.publish_time+
                                '                         </span>'+
                                '                    </div>'+
                                '                </div>'+
                                '            </div>'+
                                '        </div>'+
                                '    </div>'+
                                '</li>';
                    })
                    html += '</ul>';
                    $('#competition_list').empty().html(html);
                    // 普通用法
                    laypage.render({
                        elem: 'com_page_list',
                        count: ret_data.total, // 数据总数,
                        limit: data.limit,// 每页显示的条数。
                        curr: data.page, //初始化当前页码。
                        layout: ['prev', 'page', 'next', 'skip'],
                        theme:'#1e9fff',
                        jump: function(obj, first){
                            // 首次不执行
                            if(!first){
                                load_list(obj.curr)
                            }
                        }
                    });
                });
            }

            // 跳转详情
            util.on({
                detail: function(){
                    let id = $(this).attr('mid');
                    util.openWin({
                        url: '{:sysuri("detail")}?id='+id,
                    });
                },
            });


            // 初始化列表数据
            load_list();
    });
})
</script>